<template>
  <div class="search">
    用户名：<el-input v-model="data.userName" style="width: 240px" />
    <el-button @click="GetInputField" class="button1" type="primary">查询</el-button>
    <el-button type="primary" @click="add">添加</el-button>
  </div>
  <el-table :data="tableData" style="margin-top: 10px; width: 100%">
    <el-table-column fixed prop="id" label="Id" width="50" />
    <el-table-column prop="userName" label="用户名" width="150" />
    <el-table-column prop="realName" label="真实姓名" width="150" />
    <el-table-column prop="userLevel" label="年级" width="120" />
    <el-table-column prop="sex" label="性别" width="120" />
    <el-table-column prop="phone" label="手机号" width="120" />
    <el-table-column prop="createTime" label="创建时间" width="240" />
    <el-table-column prop="status" label="状态" width="40" />
    <el-table-column fixed="right" label="操作" width='200' min-width="120">
      <template #default>
        <el-button link type="primary" size="small">禁用</el-button>
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="primary" size="small">日志</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="width: 100%; display: flex;margin-top: 24px; justify-content: center;"> <el-pagination
      v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]" :size="size"
      :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="1234"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { studentList, type studentListype } from '@/utils/api';
import type { ComponentSize } from 'element-plus'

interface studentList1<t> {
  "total": number,  //总数
  "list": t[]
}
interface studentList2 {
  "id": number,     //用户id
  "userUuid": string,  //用户uuid
  "userName": string,  //用户名
  "realName": string | null,  //真实姓名
  "age": string | number | null,  //年龄
  "role": string | number | null,  //角色
  "sex": string | number | null,  //性别
  "birthDay": string,  //出生日期
  "phone": string | number | null,   //手机号
  "lastActiveTime": string,  //最后活动时间
  "createTime": string,  //创建时间
  "modifyTime": string,  //修改时间
  "status": number,  //状态
  "userLevel": number,  //年级
  "imagePath": string | number | null   //头像
}

let data: studentListype = reactive({
  "userName": "",  //用户名
  "role": 1,   //角色
  "pageIndex": 1,  //页码
  "pageSize": 10   //每页条数
})

const GetInputField = () => {
  console.log(data.userName)
}
const add = () => {
  console.log('添加')
}

let tableData = ref<studentList2[]>([
  {
    "id": 0,     //用户id
    "userUuid": "fd31ab62-c32f-433c-8dc4-c07e653d390a",  //用户uuid
    "userName": "王",  //用户名
    "realName": null,  //真实姓名
    "age": null,  //年龄
    "role": 1,  //角色
    "sex": null,  //性别
    "birthDay": "",  //出生日期
    "phone": null,   //手机号
    "lastActiveTime": "2021-06-21 20:01:26",  //最后活动时间
    "createTime": "2021-06-21 20:01:26",  //创建时间
    "modifyTime": "2021-06-21 20:01:35",  //修改时间
    "status": 1,  //状态
    "userLevel": 1,  //年级
    "imagePath": null   //头像
  }])
const getStudentList = () => {
  studentList<studentList1<studentList2>>(data).then(res => {
    tableData.value = res.response.list
  })
}
getStudentList()
let currentPage4 = ref(1)
let pageSize4 = ref(4)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.search {
  margin-top: 10px;
  margin-left: 20px;
}

.button1 {
  margin-left: 10px;
}
</style>
